import { Tag} from 'antd'
import React, {useState, useEffect, memo} from 'react'
import styles from './index.less'
import CustomTable from '@/components/Table'
import SearchForm from '@/components/SearchForm'
import {getMotList, getGasList} from '@/service/carMessage/list'
import {workStatus, histyMotStatus, motStatus, nStatus} from '../../../dict'

const formItemLayout = {
	labelCol: {flex: '60px'},
	wrapperCol: {flex: '1'},
}
const Inspection = memo((props: any) => {
	const {id} = props.data
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})

	const [total, setTotal] = useState(0)
	const [loading, setLoading] = useState(false)
	const [tableList, setTableList] = useState<any[]>([])

	const [paramsGas, setParamsGas] = useState({
		current: 1,
		size: 10,
	})
	const [totalGas, setTotalGas] = useState(0)
	const [loadingGas, setLoadingGas] = useState(false)
	const [tableListGas, setTableListGas] = useState<any[]>([])

	const [searchData, setSearchData] = useState({})
	const [formData, setFormData] = useState<any[]>([])

	const columns: any = [
		{
			title: '工单ID',
			dataIndex: 'motId',
			align: 'center',
			width: 200,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '车辆城市',
			dataIndex: 'cityName',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '年检类型',
			dataIndex: 'motStatus',
			align: 'center',
			width: 140,
			render: (text: any, record: any) => (
				<>
					{text ? (
						<span>
							{motStatus?.map(
								(item: {key: number; label: string}) => {
									if (item?.key === text) {
										return (
											<Tag
												color="processing"
												key={record?.id}>
												{item?.label}
											</Tag>
										)
									}
									return ''
								},
							)}
						</span>
					) : (
						'--'
					)}
				</>
			),
		},
		{
			title: '行驶证到期日期',
			dataIndex: 'motDate',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '状态',
			dataIndex: 'motStatus',
			align: 'center',
			width: 140,
			render: (text: any, record: any) => (
				<>
					{text ? (
						<span>
							{histyMotStatus?.map(
								(item: {key: number; label: string}) => {
									if (item?.key === text) {
										return (
											<Tag
												color="processing"
												key={record?.id}>
												{item?.label}
											</Tag>
										)
									}
									return ''
								},
							)}
						</span>
					) : (
						'--'
					)}
				</>
			),
		},
		{
			title: '年检时间',
			dataIndex: 'motDate',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '年检人',
			dataIndex: 'creator',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '下次年检时间',
			dataIndex: 'vin',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
	]
	const columnsGas: any = [
		{
			title: '工单id',
			dataIndex: 'id',
			align: 'center',
			width: 200,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '车辆城市',
			dataIndex: 'cityName',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '气瓶检查日期',
			dataIndex: 'gasDate',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '气瓶检到期日期',
			dataIndex: 'dueDate',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		// {
		// 	title: '所属车队长',
		// 	dataIndex: 'carOwnerName',
		// 	align: 'center',
		// 	width: 140,
		// 	render: (text: string) => <span>{text || '--'}</span>,
		// },
		{
			title: '处理状态',
			dataIndex: 'status',
			align: 'center',
			width: 140,
			render: (text: any, record: any) => (
				<>
					{nStatus?.map((item: {key: number; label: string}) => {
						if (item?.key === text) {
							return (
								<Tag color="processing" key={record?.id}>
									{item?.label}
								</Tag>
							)
						}
						return ''
					})}
				</>
			),
		},
		// {
		// 	title: '年检人',
		// 	dataIndex: 'fashionName',
		// 	align: 'center',
		// 	width: 140,
		// 	render: (text: string) => <span>{text || '--'}</span>,
		// },
		// {
		// 	title: '下次年检时间',
		// 	dataIndex: 'vin',
		// 	align: 'center',
		// 	width: 140,
		// 	render: (text: string) => <span>{text || '--'}</span>,
		// },
	]
	const onFinish = (values: any) => {
		setSearchData(values)
	}
	const onReset = () => {
		const param = {
			current: 1,
			size: 10,
		}
		setParams(() => param)
		setParamsGas(() => param)
		setSearchData({})
	}

	useEffect(() => {
		const formItems: any[] = [
			{
				type: 'group',
				key: 'group1',
				groupItems: [
					{
						type: 'input',
						label: '工单ID',
						name: 'workOrderId',
						key: 'workOrderId',
					},
					{
						type: 'select',
						key: 'status',
						name: 'status',
						label: '状态',
						keys: 'key',
						title: 'label',
						items: [...workStatus],
					},
					{},
				],
			},
		]
		setFormData(formItems)
	}, [workStatus])

	// 根据车辆id获取年检信息
	const onMotListFun = () => {
		setLoading(true)
		getMotList({
			pageNum: params?.current,
			pageSize: params?.size,
			...searchData,
			carId: id,
		})
			.then((res: any) => {
				if (res?.success) {
					setTableList(() => res.data)
					setTotal(res.page.total)
				}
				setLoading(false)
			})
			.catch(() => {
				setLoading(false)
			})
	}
	useEffect(() => {
		onMotListFun()
	}, [params, searchData, id])
	// 根据车辆id获取气瓶检信息
	const onGasListFun = () => {
		setLoadingGas(true)
		getGasList({
			pageNum: params?.current,
			pageSize: params?.size,
			...searchData,
			carId: id,
		})
			.then((res: any) => {
				if (res?.success) {
					setTableListGas(() => res.data)
					setTotalGas(res.page.total)
				}
				setLoadingGas(false)
			})
			.catch(() => {
				setLoadingGas(false)
			})
	}

	useEffect(() => {
		onGasListFun()
	}, [paramsGas, searchData, id])
	return (
		<div className={styles.admittanceAdd}>
			<div className={`${styles.content} ${styles.formDetils}`}>
				<div className="search">
					<SearchForm
						onFinish={onFinish}
						onReset={onReset}
						formItems={formData}
						formLayout={formItemLayout}
					/>
				</div>
				<div className="btnlist" />
				<CustomTable
					columns={columns}
					pagination
					total={total}
					params={params}
					callback={(pagination: any) => {
						setParams(pagination)
					}}
					loading={loading}
					dataSource={tableList}
				/>
				<div className="btnlist" />
				<CustomTable
					columns={columnsGas}
					pagination
					total={totalGas}
					params={paramsGas}
					callback={(pagination: any) => {
						setParamsGas(pagination)
					}}
					loading={loadingGas}
					dataSource={tableListGas}
				/>
			</div>
		</div>
	)
})
export default Inspection
